<template>
  <div class="set">
    <el-card>
      <div slot="header" class="clearfix">
        <i class="el-icon-arrow-left"></i>
        <h2>返回</h2>
      </div>
      <!-- 切换 -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本配置" name="first">
          <el-form ref="form" :model="form" label-width="125px">
            <h2>基本资料</h2>
            <el-form-item label="网站名称:">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="网址:">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="网站标题:">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="站点关键词:">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="站点描述:" class="zdms">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="客服QQ:">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="联系电话:">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="网站备案号:">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button>保存</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="图片相关" name="second">
          <el-form ref="form" :model="form" label-width="125px">
            <el-form-item label="网站LOGO:">
              <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview"
                :file-list="fileList"
                list-type="picture"
              >
                <div class="picture">
                  <i></i>
                  <span>选择图片</span>
                </div>
              </el-upload>
            </el-form-item>
            <el-form-item label="ICO:">
              <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview"
                :file-list="fileList"
                list-type="picture"
              >
                <div class="picture">
                  <i></i>
                  <span>选择图片</span>
                </div>
              </el-upload>
            </el-form-item>
            <el-form-item label="视频LOGO:">
              <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview"
                
                :file-list="fileList"
                list-type="picture"
              >
                <div class="picture">
                  <i></i>
                  <span>选择图片</span>
                </div>
              </el-upload>
            </el-form-item>
            <el-form-item label="图标LOGO:">
              <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview"
             
                :file-list="fileList"
                list-type="picture"
              >
                <div class="picture">
                  <i></i>
                  <span>选择图片</span>
                </div>
              </el-upload>
            </el-form-item>
            <el-form-item label="素材LOGO:">
              <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview"
               
                :file-list="fileList"
                list-type="picture"
              >
                <div class="picture">
                  <i></i>
                  <span>选择图片</span>
                </div>
              </el-upload>
            </el-form-item>
            <el-form-item label="网站水印:">
              <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview"
            
                :file-list="fileList"
                list-type="picture"
              >
                <div class="picture">
                  <i></i>
                  <span>选择图片</span>
                </div>
              </el-upload>
            </el-form-item>
            <el-form-item>
              <el-button>保存</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="通信接口" name="third">
          <el-form ref="form" :model="form" label-width="125px">
            <h2>邮局设置</h2>
            <el-form-item label="设置邮箱账号:">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="邮箱密码:">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="邮箱SMTP:">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="邮箱端口:">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <h2>QQ接口</h2>
            <el-form-item label="APP ID:">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="APP KEY:">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <h2>微信接口</h2>
            <el-form-item label="APP ID:">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="APPSecret:">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <h2>手机短信接口</h2>
            <el-form-item label="手机短信">
              <el-radio v-model="radio" label="1">开通</el-radio>
              <el-radio v-model="radio" label="2">不开通</el-radio>
            </el-form-item>
            <el-form-item class="seet" label="剩余短信数:">
              <el-input v-model="form.name"></el-input>
              <span>输入您的短信运营商提供的剩余可用短信数量</span>
            </el-form-item>
            <el-form-item label="短信发送模式:">
              <el-radio v-model="sending" label="1">直接发送模式(类似中国网建)</el-radio>
              <el-radio v-model="sending" label="2">模板发送形式(阿里大于)</el-radio>
              <el-radio v-model="sending" label="3">模板发送形式(阿里通信)</el-radio>
            </el-form-item>
            <el-form-item class="seet" label="短信模板ID1:">
              <el-input v-model="form.name"></el-input>
              <span>验证码：{{testing}}，有效时间5分钟，您正在进行手机绑定，如果不是本人操作，请忽略此信息。</span>
            </el-form-item>
            <el-form-item>
              <el-button>保存</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="支付接口" name="fourth">
          <el-form ref="form" :model="form" label-width="125px">
            <h2>手机支付宝</h2>
            <el-form-item label="app_id:">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="商户私钥:">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="支付宝公钥:">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <h2>微信支付</h2>
            <el-form-item label="支付方式:">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="APP_id:">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="MCHID:">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="KEY:">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="APPSECRET:">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button>保存</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "first",
      form: {
        name: ""
      },
      // 验证码
      testing:'552484',
      // 图片列表
      fileList: [
        {
          name: "food.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
        }
      ],
      radio: '1',
      // 短信发送方式
      sending:'2'
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 点击文件列表中上传文件的钩子
    handlePreview(file) {
      console.log(file);
    }
  }
};
</script>

<style scoped>
.clearfix {
  margin-left: 50px;
}
h2 {
  display: inline-block;
  margin: 0;
  margin-left: 12px;
  font-size: 20px;
  font-weight: 400;
  color: #3f51b5;
}
.el-icon-arrow-left {
  color: #3f51b5;
}
.el-tabs {
  margin-left: 80px;
  margin-top: 9px;
}
.el-tabs h2 {
  font-size: 20px;
  font-weight: 400;
  color: #212121;
  padding-left: 10px;
  border-left: 4px solid #3f51b5;
  margin-bottom: 20px;
}
.el-input {
  width: 320px;
}
.el-button {
  width: 200px;
  height: 50px;
  background: #3f51b5;
  border-radius: 5px;
  margin-left: -110px;
  font-size: 24px;
  color: #ffffff;
  margin-top: 34px;
}
.el-form-item .picture {
  width: 320px;
  height: 36px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}
.el-form-item .picture i {
  display: inline-block;
  width: 28px;
  height: 20px;
  background: url("../assets/img/photo.png") no-repeat;
  background-size: 28px 20px;
  margin: 8px 12px 8px 16px;
  vertical-align: middle;
}
.el-form-item .picture span {
  font-size: 16px;

  color: #757575;
}
.seet {

font-size: 14px;

color: #757575;

}
</style>